<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>login_checkPic_frame</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <style type="text/css">
    body,html{
        background: transparent;
    }
        #classify {
            color: #ffffff !important;
        }
        .addressSection{
          background: #fff;
        }
        .mapsInner{
          width: 100%;
          background: #fff;
        }
        .addressTitle{
          width: 100%;
          height: 92px;
          position: fixed;
          left: 0px;
          border-radius: 15px 15px 0 0;
          box-shadow:0px -10px 15px rgba(140,140,140,0.5);
          z-index: 9000;
        }
        .aui-media-list .aui-list-item-inner{
           height: 92px;
           padding-top: 20px;
        }
        .aui-list .aui-list-item{
               padding-left: 20px;
        }
        .addressTitltName{
          font-size: 20px!important;
          font-weight: bold;
        }
        .loacalPic{
          width: 30px;
          margin: 0 15px 0 0;
        }
        .aui-list-item-text{
          font-weight: 600;
        }
        .aui-list .aui-list-item {
             background-image: linear-gradient(0,transparent,transparent 50%,transparent 50%);
             background-image: -webkit-linear-gradient(90deg,transparent,transparent 50%,transparent 50%);
        }
        .slidesBottom{
           animation: slidesBottom  .3s ease forwards;
        }
        .slidesUp {

        }
        @keyframes slidesBottom {
        from {top:700px;}
        to {top:0px;}
        }
        /*适配屏幕320px*/
        @media (max-width: 320px){
          .aui-list-item-text{
              font-size: 10px!important;
          }
      	}
        /*适配屏幕320px*/
    </style>
</head>
<body>
    <section class="aui-content aui-margin-b-10 addressSection" id="mapPage" v-bind:style="{height:wwHeight}">

        <!-- <ul class="aui-list aui-media-list addressTitle" id="mapPageFooter" @click="showAddressList()"
          v-bind:style="{top:wTop}" v-bind:class="{slidesBottom:showMask1,slidesUp:showMask2}">
            <li class="aui-list-item aui-list-item-middle">
                <div class="aui-media-list-item-inner">
                    <div class="loacalPic" >
                        <img src="../../image/main/myLoacaltion@2x.png" class="aui-img-round" >
                    </div>
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-text">
                            <div class="aui-list-item-title addressTitltName">半坡国际艺术区</div>
                        </div>
                        <div class="aui-list-item-text">
                          纺织城 灞桥区 纺织城西街 138号
                        </div>
                    </div>
                </div>
            </li>
        </ul> -->
    </section>
  </body>
<script type="text/javascript" src="../../script/api.js" ></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/fastclick.js"></script>
<script type="text/javascript">
    apiready = function () {
      var map = api.require('bMap');
      api.setFrameAttr({
          bgColor: 'transparent'
          });
      ///////初始化地图
          map.initMapSDK(function(ret) {
              if (ret.status) {
                  //console.log('地图初始化成功，可以从百度地图服务器检索信息了！');
              }
         });
         ///////获取当前经纬度
         map.getLocation({
             accuracy: '100m',
             autoStop: true,
             filter: 1
         }, function(ret, err) {
             if (ret.status) {
                 app.locationLat = ret.lat;
                 app.locationLon = ret.lon;
                ///////打开地图
                map.open({
                    rect: {
                        x: 0,
                        y: 0,
                        w: 320,
                        h: app.wHeight
                    },
                    zoomLevel: 10,
                    showUserLocation: true,
                    fixedOn: 'main_seclectAddress_frame',
                    fixed: true
                }, function(ret) {
                    if (ret.status) {
                        //alert('定位中')
                    }
                });
                ///////获取的经纬度查找的地址
                map.getNameFromCoords({
                   lon: 130.33,
                   lat: 30.33
               }, function(ret, err) {
                   if (ret.status) {
                     //alert(111)
                       //console.log(JSON.stringify(ret));
                   }else{
                     alert(err.code);
                   }
               });
              // console.log(map.getNameFromCoords.className)
                ///////设置地图当前位置
                map.setCenter({
                    coords: {
                        lon: app.locationLat,
                        lat: app.locationLon
                    },
                    animation: false
                });
                ///////设置地图指南针位置
                map.setCompass({
                   position: {
                       x: 20,
                       y: 20
                   }
               });
                 ///////设置地图标注位置弹出气泡
               map.popupBubble({
                    id: 2
                });
                   ///////设置地图标注位置气泡信息
               map.setBubble({
                   id: 2,
                   bgImg: 'widget://res/bubble_bg.png',
                   content: {
                       title: '大标题',
                       subTitle: '概述内容',
                       illus: 'http://ico.ooopic.com/ajax/iconpng/?id=145044.png'
                   },
                   styles: {
                       titleColor: '#000',
                       titleSize: 16,
                       subTitleColor: '#999',
                       subTitleSize: 12,
                       illusAlign: 'left'
                   }
               }, function(ret) {
                   if (ret) {
                       //alert(JSON.stringify(ret));
                   }
               });
             } else {
                 alert(err.code);
                 api.alert({
                      title: '提示',
                      msg: err.code,
                  }, function(ret, err) {

                  });
             };
         });

         ///////初始化地图是否打开定位服务
         map.getLocationServices(function(ret, err) {
             if (ret.enable) {
              // console.log(app.locationLet)
             } else {
                 api.alert({
                      title: '提示',
                      msg: '未开启定位功能！',
                  }, function(ret, err) {

                  });
             }
         });
    }
    ////初始化页面
    var app = new Vue({
        el: '#mapPage',
        data: {
            wHeight: '',
            wwHeight: '',
            wTop : '',
            locationLat : '',
            locationLon : '',
            showMask1 : false,
            showMask2 : false
        },
        methods:{
          init: function() {
            /////初始化页面高度
              var wh = document.documentElement.clientHeight || document.body.clientHeight;
              var mapPageFooterH = document.getElementById('mapPageFooter').offsetHeight;
                  this.wHeight = (wh-mapPageFooterH-2) + 'px';
                  this.wwHeight = (wh-20) + 'px';
                  this.wTop = this.wHeight;
             },
             showAddressList : function(){
                  this.showMask1 = !this.showMask1;
             }
         },
         mounted: function() {
             this.init();

         }
    });
    var mapPageMethod = {
        initMothed : function(){
        }
    }
</script>
</html>
